<template>
  <div class="import-read-dialog">
    <MyDialog :show="isShowCancel" @beforeClose="beforeClose">
      <template #body>
        <el-form
          :model="dataForm"
          :rules="rulesForm"
          label-width="100px"
          size="small"
          ref="cancelForm"
        >
          <el-form-item label="取消原因" prop="reason">
            <el-input
              placeholder="请输入取消原因"
              v-model="dataForm.reason"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="上传文件">
            <el-button type="info" size="small" v-if="isShowRemind" @click="showRemind">选择附件</el-button>
            <el-upload
              v-else
              class="upload-demo"
              action
              ref="uploadButtonCancel"
              :http-request="modeUpload"
              :before-upload="beforeUpload"
              :on-change="handleTopImageSuccess"
              :on-remove="handleRemove"
              :limit="5"
            >
              <el-button type="info" size="small">选择附件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </template>
      <div slot="title">
        <p>{{ title }}</p>
      </div>
      <div slot="footer">
        <span>
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            :loading="btnLoading || btnOutLoading"
            @click="submit('cancelForm')"
            >确 定</el-button
          >
        </span>
      </div>
    </MyDialog>

    <UploadRemind :visible="dialogVisible" @close="handleClose" @submit="handleSubmit" :info="info"></UploadRemind>
  </div>
</template>

<script>
import { getRemindInfo } from '@/api/access-manage/index'
import UploadRemind from '@/components/uploadRemind.vue';

import { toUploadFile } from "../../../api/access-manage/index";
export default {
  name: "CancelDialog",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    isShowCancel: {
      type: Boolean,
      default: false,
    },
    btnOutLoading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    UploadRemind
  },
  watch: {
    isShowCancel() {
      if (this.isShowCancel) {
        if (this.isPrivateLocalF) {
          this.judgeShowRemind()
          this.isShowRemind = true
        }

        this.uploadFileList = []
        this.dataForm = {
          reason: "",
        };
      }
    },
  },
  data() {
    return {
      isPrivateLocalF: process.env.VUE_APP_LOCAL == 'fangshan',
      info: '上传附件提醒',
      dialogVisible: false, // 上传附件提示框
      isShowRemind: false,

      btnLoading: false,
      uploadFileList: [],
      dataForm: {
        reason: "",
      },
      rulesForm: {
        reason: [
          { required: true, message: "请输入取消原因", trigger: "blur" },
          {
            min: 1,
            max: 40,
            message: "长度限制为1~40字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 调用接口，判断是否需要展示提示按钮， 有值,将值复制到框里
    judgeShowRemind() {
      // 接口
      getRemindInfo().then(res => {
        this.info = res.data
        if(res.data == null) {
          this.isShowRemind = false
        }
      })

      // 赋值
    },
    // 展示上传文件提示框
    showRemind() {
      this.dialogVisible = true
    },
    handleSubmit() {
      this.dialogVisible = false
      this.isShowRemind = false
    },
    handleClose() {
      this.dialogVisible = false
    },

    
    // 调阅取消 - 确认
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let formData = new FormData();
          this.uploadFileList.map((e) => {
            formData.append("file", e.file);
          });

          if (this.uploadFileList.length > 0) {
            // { id: 0 }
            toUploadFile(formData)
              .then((res) => {
                if (res.code == 200) {
                  this.$emit("submit", this.dataForm, res.data);
                  this.btnLoading = false;
                }
              })
              .catch((err) => {});
          } else {
            this.$emit("submit", this.dataForm, []);
            this.btnLoading = false;
          }
        }
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 关闭 右侧X
    beforeClose() {
      this.$emit("closeDialog");
    },
    // 文件上传
    modeUpload(param) {
      this.uploadFileList.push(param);
      // this.$emit("modeUpload", param);
    },
    // 移除 列表中的文件
    handleRemove(file) {
      let list = [];
      this.uploadFileList.map((e) => {
        if (e.file.uid != file.uid) {
          list.push(e);
        }
      });
      this.uploadFileList = list;
    },
    // 上传文件限制
    beforeUpload(file) {
      // 限制文件最大为10MB
      const isLt10M = file.size / 1024 / 1024 <= 10;
      if(!isLt10M) {this.$message.warning('上传文件大小不能超过 10MB!');}

      // this.uploadFileList 中 已有此文件 则 返回 false
      let isRepeat = this.uploadFileList.filter(e => e.file.name == file.name).length > 0
      if (isRepeat) {this.$message.warning('上传文件重复');}

      return isLt10M && !isRepeat;
    },
    // 上传成功后
    handleTopImageSuccess() {
      // this.$refs.uploadButton.submit();
      // // 确定上传后需 清空文件 否则会多次上传
      // this.$refs.uploadButton.clearFiles();
    },
  },
};
</script>
